<link rel="stylesheet" href="<?php echo ThemePath(); ?>/css/bootstrap-timepicker.css">
<link rel="stylesheet" href="<?php echo ThemePath(); ?>/css/jquery-ui.css">
<script src="<?php echo ThemePath(); ?>/js/jquery-ui.js"></script>
<script src="<?php echo ThemePath(); ?>/js/bootstrap-timepicker.min.js"></script>
<script type="text/javascript" src="<?php echo ThemePath(); ?>/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="<?php echo ThemePath(); ?>/js/createClass.js"></script>
<script type="text/javascript" src="<?php echo ThemePath(); ?>/js/jquery.blockUI.js"></script>

<section class="create-class class-top classes-set">
    <div class="container">
        <div class="row">   
            <div class="col-lg-12 column12">         
                <div id="Bread">
                    <ol class="breadcrumb">
                        <li><a href="<?php echo SITE_URL; ?>">Home</a></li>
                        <li><a href="<?php echo $this->createUrl('/myskillhippo'); ?>">My Skillhippo</a></li>
                        <li class="active">Create a Class</li>
                    </ol>
                </div><!--bread-->
            </div> <!--basket col--> 
        </div><!--breadcrumb row ends here--> 
        <div class="row">
            <div class="col-lg-12 column12">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="teach">
                        <h3>Step 2: <span>Class venue & batch</span></h3>
                        <hr class='classcoursestep'>
                        <div class="col-lg-12 course-pdl">
                            <div class="row">                          
                                <div class="venue-teach">
                                    <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12 column3 course-pdl tabBox">
                                        <ul class="teach-tab">
                                            <?php
                                            $venueIndex = '';
                                            if (!empty($venuesWithClass)) {
                                                for ($venueIndex = 0; $venueIndex < count($venuesWithClass); $venueIndex++) {
                                                    ?>
                                                    <li class="<?php echo ($venueIndex == 0) ? 'active' : ''; ?> add_venue_class_show_hide_<?php echo $venueIndex; ?>"><a href="javascript:void(0)" id="venue_class_show_hide_<?php echo$venueIndex; ?>" onclick="showVenueContent(this.id);"> Venue <span class="createdVenueCount" id="create_venue_class_show_hide_<?php echo $venueIndex; ?>"> <?php echo $venueIndex + 1; ?> </span></a>
                                                        <?php if ($venueIndex != 0) { ?><a href="javascript:void(0)"  id="venue_remove_<?php echo $venueIndex; ?>" onclick="reMoveVenue(this.id);" class="close-btn venue-first"></a></li>
                                                            <?php
                                                        }
                                                    }
                                                } else {
                                                    ?>
                                                <li class="active add_venue_class_show_hide_0"><a href="javascript:void(0)" id="venue_class_show_hide_0" onclick="showVenueContent(this.id);" class='venue-first'>Venue <span class="createdVenueCount" id="create_venue_class_show_hide_0"> 1 </span></a></li>
                                            <?php } ?>
                                            <li><a href="javascript:void(0)" id="venue_<?php echo ($venueIndex == '') ? '0' : $venueIndex - 1; ?>" onclick="addVenue(this.id);" class='venue-btn11'>Add a venue</a></li>
                                        </ul>

                                    </div>
                                    <div class="tab-pane fade in active" id="venue-first">
                                        <div class="col-lg-10 col-md-10 col-sm-10 column10 col-xs-12 course-pdr padding-zero-left">
                                            <?php
                                            $form = $this->beginWidget('GxActiveForm', array(
                                                'id' => 'class-venue-form',
                                                'enableAjaxValidation' => true,
                                                'htmlOptions' => array('enctype' => 'multipart/form-data', 'class' => 'venue-form'),
                                            ));
                                            ?> <div class="errorMessage" id="errorAnchor" style="display:none">Please Check all venue and batch something may be blank field.</div><?php
                                            if (!empty($venuesWithClass)) {
                                                $this->renderPartial('_classvenueUpdate', array('model' => $model, 'modelClassBatch' => $modelClassBatch, 'venuesWithClass' => $venuesWithClass,
                                                    'selectedVenue' => $selectedVenue, 'form' => $form));
                                            } else {
                                                ?>
                                                <div class="venueDetails">
                                                    <div id="venue_count_0" class="venue_class_show_hide_0 venueContent">
                                                        <div class="row">
                                                            <div class="col-lg-4 col-md-4 col-sm-4 column4">
                                                                <input type="hidden" name="venueIndex[]" value ="0">
                                                                <input type="hidden" name="getVenueId" id="selectedVenueId">
                                                                <input type="hidden" name="getCountry" id="getCountryId">
                                                                <input type="hidden" id="getAllselectVenueVal" value="">
                                                                <label for="class_venue_venueid_">Select Venue</label>
                                                                <?php echo CHtml::dropDownList('ClassVenue[venueId][]', '', getVenueByUser($model), array("empty" => "Select venue", 'class' => 'form-control book-control selectedVenue', 'onchange' => 'getVanueDeatils(this.id);', 'id' => 'class_venue_venueid_0')); ?>
                                                                <span class="class-arrow1"></span>
                                                                <p id="error_class_venue_venueid_0" class="errorMessage" style="display:none">You have already selected this venue. So please select another venue!</p>
                                                            </div>
                                                            <div class="col-lg-8 col-md-8 col-sm-8 course-pdr column8">
                                                                <?php echo $form->labelEx($model, 'name'); ?>
                                                                <?php echo $form->textField($model, 'name[]', array('maxlength' => 45, 'id' => 'class_venue_name_0', 'class' => 'requiredfield form-control book-control', 'onblur' => 'checkValueEmpty(this.id)')); ?>
                                                                <div class="errorMessage" id="error_class_venue_name_0" style="display:none">Name cannot be blank.</div>                                                        
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12 column12 course-pdr">
                                                            <?php echo $form->labelEx($model, 'address_line1'); ?>
                                                            <?php echo $form->textField($model, 'address_line1[]', array('maxlength' => 45, 'id' => 'class_venue_address_line1_0', 'class' => 'requiredfield form-control book-control', 'onblur' => 'checkValueEmpty(this.id)')); ?>
                                                            <div class="errorMessage" id="error_class_venue_address_line1_0" style="display:none">Address Line 1 cannot be blank.</div>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12 column12 course-pdr">
                                                            <?php echo $form->labelEx($model, 'address_line2'); ?>
                                                            <?php echo $form->textField($model, 'address_line2[]', array('maxlength' => 45, 'id' => 'class_venue_address_line2_0', 'class' => 'form-control book-control')); ?>
                                                        </div>
                                                        <div class="col-lg-12 col-md-12 column12 course-pdr">
                                                            <?php echo $form->labelEx($model, 'venue_locality'); ?>
                                                            <?php echo $form->textField($model, 'venue_locality[]', array('maxlength' => 45, 'id' => 'class_venue_venue_locality_0', 'class' => 'requiredfield form-control book-control', 'onkeyup' => "getLocality(this.id)", 'onpaste' => "return false;")); ?>
                                                            <div class="errorMessage" id="error_class_venue_venue_locality_0" style="display:none">Locality cannot be blank.</div>
                                                            <div class="errorMessage" id="error_local_class_venue_venue_locality_0"></div>
                                                            <div class="note" > Note:<?php echo Message::LOCALITY_HELP; ?></div>
                                                        </div>
                                                        <div class="clearfix">
                                                            <div class="col-lg-4 col-md-4 col-sm-4 column4 ">
                                                                <?php echo $form->labelEx($model, 'zip_code'); ?>
                                                                <?php echo $form->textField($model, 'zip_code[]', array('maxlength' => 6, 'id' => 'class_venue_zip_code_0', 'class' => 'form-control book-control requiredfield', 'onblur' => 'checkValueEmpty(this.id)')); ?>
                                                                <div class="errorMessage" id="error_class_venue_zip_code_0" style="display:none">Zip Code cannot be blank.</div>
                                                            </div>
                                                            <div class="col-lg-8 col-md-8 col-sm-8 course-pdr column8">
                                                                <?php echo $form->labelEx($model, 'country_id'); ?>
                                                                <?php echo CHtml::dropDownList('ClassVenue[country_id][]', SkillConfig::ACTIVE_COUNTRY, GxHtml::listData(Country::model()->findAllByAttributes(array('is_active' => SkillConfig::STATUS_ACTIVE, 'id' => SkillConfig::ACTIVE_COUNTRY)), 'id', 'name'), array('id' => 'class_venue_country_id_0', 'onchange' => 'getSelectedState(this.id)', 'class' => 'form-control book-control')); ?>
                                                                <span class="class-arrow1"></span>
                                                                <div class="errorMessage" id="error_class_venue_country_id_0" style="display:none">Country Name cannot be blank.</div>
                                                            </div>
                                                        </div>
                                                        <div class="clearfix">
                                                            <div class="col-lg-4 col-md-4 col-sm-4 column4">
                                                                <?php echo $form->labelEx($model, 'state_id'); ?>
                                                                <?php echo CHtml::dropDownList('ClassVenue[state_id][]', SkillConfig::ACTIVE_STATE, GxHtml::listData(State::model()->findAllByAttributes(array('is_active' => SkillConfig::STATUS_ACTIVE, 'id' => SkillConfig::ACTIVE_STATE)), 'id', 'name'), array('id' => 'class_venue_state_id_0', 'onchange' => 'getSelectedCity(this.id)', 'class' => 'form-control book-control')); ?>
                                                                <span class="class-arrow1"></span>
                                                                <div class="errorMessage" id="error_class_venue_state_id_0" style="display:none">State Name cannot be blank.</div>

                                                            </div>
                                                            <div class="col-lg-8 col-md-8 col-sm-8 course-pdr column8">
                                                                <?php echo $form->labelEx($model, 'city_id'); ?>

                                                                <?php echo CHtml::dropDownList('ClassVenue[city_id][]', '1', GxHtml::listData(City::model()->findAllByAttributes(array('status' => SkillConfig::STATUS_ACTIVE)), 'id', 'city_name'), array('id' => 'class_venue_city_id_0', 'class' => 'form-control book-control')); ?>
                                                                <span class="class-arrow1"></span>
                                                                <div class="errorMessage" id="error_class_venue_city_id_0" style="display:none">City Name cannot be blank.</div>

                                                            </div>
                                                        </div>

                                                        <!-- Readjustment Of Menus -->
                                                        <div class="row">
                                                            <div class="clearfix"></div>
                                                            <?php /* .......................         Here is the batch code start................ */ ?>
                                                            <div class="addbatch_venue_0_batch container padding-zero-right">
                                                                <?php $this->renderPartial('//classBatch/_form', array('form' => $form, 'model' => $modelClassBatch)); ?>
                                                            </div> 

                                                            <?php /* .......................         Here is the batch code end................ */ ?>

                                                        </div><!--batch main row end here-->

                                                        <!-- Readjustment of Menus -->
                                                        <!-- ADD A BATCH AND ADD AVENUE STARTS HERE -->
                                                        <div class="row batch-row adding-el">
                                                            <div class="col-lg-12 column12 course-pdr">
                                                                <a href="javascript:void(0)" id="venue_0_batch_0" onclick="addBatch(this.id);">Add Batch</a>

                                                            </div>
                                                        </div> 
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </div>
                                                <!-- ADD A BATCH AND ADD A VENUE DIV ENDS HERE -->
                                            <?php } ?>
                                            <div class="clearfix"></div>
                                            <div class="gap"></div>
                                            <div class="clearfix"></div>

                                            <div class="row save-row adding-el">
                                                <div class="col-lg-12 column12 course-pdr">
                                                    <?php echo GxHtml::submitButton(Yii::t('app', 'Save & Continue'), array('id' => 'save_class', 'class' => 'btn')); ?>
                                                    <input type="button" class="" value="Back" id="<?php echo $authKey; ?>" onclick="setAuthKey(this.id, 'Classes/Update')">
                                                </div>
                                            </div>
                                            <!--venue first tab pane div end here-->
                                            <?php $this->endWidget(); ?> 
                                        </div> 
                                        <div class="clearfix"></div>             

                                    </div>

                                </div><!---tab content div end here-->

                            </div><!--create nab col end here-->
                        </div> <!--create nav row end here-->
                    </div>

                </div>

            </div>
        </div></div>             
</section>
<script>
                                                        function getVenueName(venueId) {
                                                            imageloding();
                                                            $("#selectedVenueId").val(venueId);
                                                            $.post("<?php echo Yii::app()->createUrl("classVenue/getAllVenue"); ?>", {'YII_CSRF_TOKEN': $('input[name="YII_CSRF_TOKEN"]').val(), venueId: venueId}, function(result) {
                                                                var venueId = $("#selectedVenueId").val();
                                                                $("#" + venueId).html(result);
                                                            });
                                                        }
                                                        function getAllCountry(countryId) {
                                                            $("#getCountryId").val(countryId);
                                                            $.post("<?php echo Yii::app()->createUrl("classVenue/getAllCountry"); ?>", {'YII_CSRF_TOKEN': $('input[name="YII_CSRF_TOKEN"]').val(), countryId: countryId}, function(result) {
                                                                var countryId = $("#getCountryId").val();
                                                                $("#" + countryId).html(result);
                                                                getSelectedState(countryId);
                                                            });
                                                        }

                                                        function getSelectedState(countryId) {
                                                            var stateId = countryId.split("_");
                                                            $("#getCountryId").val(stateId[4]);
                                                            var countryId = $("#" + countryId).val();
                                                            $.post("<?php echo Yii::app()->createUrl("classVenue/dynamicState"); ?>", {'YII_CSRF_TOKEN': $('input[name="YII_CSRF_TOKEN"]').val(), countryId: countryId}, function(result) {
                                                                var stateId = $("#getCountryId").val();
                                                                $("#class_venue_state_id_" + stateId).html(result);
                                                                getSelectedCity("class_venue_state_id_" + stateId);
                                                            });
                                                        }
                                                        function getSelectedCity(stateid) {
                                                            var stateId = stateid.split("_");
                                                            $("#getCountryId").val(stateId[4]);
                                                            var stateId = $("#" + stateid).val();
                                                            $.post("<?php echo Yii::app()->createUrl("classVenue/dynamicCity"); ?>", {'YII_CSRF_TOKEN': $('input[name="YII_CSRF_TOKEN"]').val(), stateId: stateId}, function(result) {
                                                                var cityId = $("#getCountryId").val();
                                                                $("#class_venue_city_id_" + cityId).html(result);
                                                                $(document).ajaxStop($.unblockUI);
                                                            });
                                                        }


                                                        function updateTextArea() {
                                                            var allVals = [];
                                                            $('.selectedVenue').each(function() {
                                                                allVals.push($(this).val());
                                                            });
                                                            $('#getAllselectVenueVal').val(allVals)
                                                        }

                                                        function getVanueDeatils(venueId) {
                                                            var venueIndex = venueId.split("_");
                                                            $("#getCountryId").val(venueIndex[3]);
                                                            var venueIndex = $("#" + venueId).val();
                                                            var venueIndexVal = $("#getCountryId").val();
                                                            updateTextArea(venueIndex);
                                                            if (venueIndex == '') {
                                                                removeVanueValue(venueIndexVal)
                                                            }
                                                            else {
                                                                num = 0;
                                                                var selectedValue = $("#getAllselectVenueVal").val();
                                                                var array = selectedValue.split(",");
                                                                for (i = 0; i < array.length; i++)
                                                                    (array[i] == venueIndex) ? num++ : "";
                                                                if (num == 1)
                                                                {
                                                                    getVenueDetailsById(venueIndex);
                                                                    $("#error_class_venue_venueid_" + venueIndexVal).css("display", "none");
                                                                }
                                                                else {
                                                                    removeVanueValue(venueIndexVal);
                                                                    $("#error_class_venue_venueid_" + venueIndexVal).css("display", "block");
                                                                    $("#" + venueId).val('');
                                                                }


                                                            }
                                                        }
                                                        function getVenueDetailsById(venueIndex) {
                                                            $.post("<?php echo Yii::app()->createUrl("classVenue/SelectedVenue"); ?>", {'YII_CSRF_TOKEN': $('input[name="YII_CSRF_TOKEN"]').val(), venueId: venueIndex, user_id: 1}, function(result) {
                                                                var obj = jQuery.parseJSON(result);
                                                                var venueId = $("#getCountryId").val();
                                                                getSelectedState("class_venue_country_id_" + venueId);
                                                                $("#class_venue_name_" + venueId).val('' + obj.name);
                                                                $("#class_venue_address_line1_" + venueId).val('' + obj.address_line1);
                                                                $("#class_venue_address_line2_" + venueId).val('' + obj.address_line2);
                                                                $("#class_venue_venue_locality_" + venueId).val('' + obj.venue_locality);
                                                                $("#class_venue_zip_code_" + venueId).val('' + obj.zip_code);
                                                                $("#class_venue_country_id_" + venueId).val('' + obj.country_id);
                                                                $("#class_venue_state_id_" + venueId).val('' + obj.state_id);
                                                                $("#class_venue_city_id_" + venueId).val('' + obj.city_id);
                                                                $("#class_venue_name_" + venueId).attr("readonly", "readonly");
                                                                $("#class_venue_address_line1_" + venueId).attr("readonly", "readonly");
                                                                $("#class_venue_address_line2_" + venueId).attr("readonly", "readonly");
                                                                $("#class_venue_venue_locality_" + venueId).attr("readonly", "readonly");
                                                                $("#class_venue_zip_code_" + venueId).attr("readonly", "readonly");
                                                                $("#error_class_venue_name_" + venueId).hide();
                                                                $("#error_class_venue_address_line1_" + venueId).hide();
                                                                $("#error_class_venue_address_line2_" + venueId).hide();
                                                                $("#error_class_venue_zip_code_" + venueId).hide();
                                                            });
                                                        }

                                                        function removeVanueValue(venueId) {
                                                            $("#class_venue_name_" + venueId).removeAttr("readonly");
                                                            $("#class_venue_address_line1_" + venueId).removeAttr("readonly");
                                                            $("#class_venue_address_line2_" + venueId).removeAttr("readonly");
                                                            $("#class_venue_zip_code_" + venueId).removeAttr("readonly");
                                                            $("#class_venue_venue_locality_" + venueId).removeAttr("readonly");
                                                            $("#class_venue_name_" + venueId).val('');
                                                            $("#class_venue_address_line1_" + venueId).val('');
                                                            $("#class_venue_address_line2_" + venueId).val('');
                                                            $("#class_venue_venue_locality_" + venueId).val('');
                                                            $("#class_venue_zip_code_" + venueId).val('');
                                                        }

                                                        $('#save_class').click(function(e) {
                                                            var isValid = true;
                                                            $('.requiredfield').each(function() {
                                                                if ($.trim($(this).val()) == '') {
                                                                    $(".venueContent").show();
                                                                    $(".uncollapse").show();
                                                                    $(".contenttoggleClass").show();
                                                                    var errorid = $('#' + this.id).next('div').attr("id");
                                                                    $("#" + errorid).show();
                                                                    isValid = false;
                                                                    window.location = '#errorAnchor';
                                                                    $("#errorAnchor").show();

                                                                } else {
                                                                    var errorid = $('#' + this.id).next('div').attr("id");
                                                                    $("#" + errorid).hide();
                                                                    $("#errorAnchor").hide();

                                                                }
                                                            });
                                                            $('.hastimePicker').each(function() {
                                                                timeCheck(this.id);


                                                            });
                                                            if (isValid == false)
                                                                e.preventDefault();


                                                        });

                                                        $(document).ready(function() {
                                                            $(".dynamicclass").removeAttr('id');
                                                            $('.DateTimePicker').on('click', function() {
                                                                $(this).datetimepicker({
                                                                    stepMinute: 15
                                                                }).datetimepicker('show');
                                                            });

                                                        });



                                                        function getLocality(id) {
                                                            $("#" + id).typeahead({
                                                                source: function(query, process) {
                                                                    $.ajax({
                                                                        url: '<?php echo Yii::app()->createUrl("classVenue/getLocality"); ?>',
                                                                        type: 'POST',
                                                                        dataType: 'JSON',
                                                                        data: 'YII_CSRF_TOKEN=' + $('input[name="YII_CSRF_TOKEN"]').val() + '&locality_name=' + query,
                                                                        success: function(data) {
                                                                            //console.log(data);
                                                                            process(data);
                                                                        }
                                                                    });
                                                                }

                                                            });

                                                        }




</script>